<!-- 重点人员标注 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../yl/index.css" />
  <link rel="stylesheet" href="../../style/index.css" />
  <link rel="stylesheet" href="../../component/pear/css/pear.css" />
  <link rel="stylesheet" href="../../admin/css/other/console1.css" />
  <title>重点人员标注</title>
  <style>
    [v-cloak] {
      display: none;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* 容器布局 */
    #app {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .title {
      padding: 15px;
      background: #fff;
      /* box-shadow: 0 2px 12px rgba(0,0,0,0.1); */
      z-index: 1;
    }

    .body {
      flex: 1;
      display: flex;
      gap: 20px;
      padding: 15px;
      overflow: hidden;
    }

    /* 左侧导航 */
    .left {
      padding: 1%;
      flex: 0 0 280px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: auto;
    }

    /* 右侧主内容 */
    .right {
      padding: 1%;
      flex: 1;
      min-width: 300px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
    }

    /* 响应式处理 */
    @media (max-width: 768px) {
      .body {
        flex-direction: column;
        padding: 10px;
      }

      .left {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 15px;
      }

      .el-table {
        max-height: 50vh;
      }
    }

    /* 表格容器 */
    .table-container {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    .el-table {
      height: 100% !important;
    }

    /* 分页样式 */
    .el-pagination {
      padding: 12px;
      background: #fff;
      border-top: 1px solid #eee;
    }

    .button {
      margin-left: 10px;
      min-width: 96px;
      height: 32px;
      background: #c12c1f;
      border-radius: 16px;
      color: white;
      cursor: pointer;
      outline: none;
      margin-top: 10px;

      border: none;
      font-size: 13px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .button:hover {
      background-color: #a82319;
      /* 深一点的红色 */
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .button:active {
      transform: translateY(0);
    }

    .zdtype {
      background: #d31805;
      color: #fff;
      margin: 1%;
      width: 10%;
    }

    :deep(.el-select__wrapper) {
      align-items: normal;
    }

    .custom-dialog {
      padding: 20px;


    }

    .custom-dialog .dialog-header {
      text-align: center;
      padding: 15px 0;


    }

    .custom-dialog .dialog-header span {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .dialog-content {
      padding: 0px 50px;


    }

    .dialog-content .full-width-checkbox {
      display: block;
      padding-left: 2%;
      font-weight: bold;
      color: #333;
    }

    .dialog-content .checkbox-columns {
      display: flex;


    }

    .dialog-content .checkbox-columns .checkbox-column {
      width: 48%;


    }

    .dialog-content .checkbox-columns .checkbox-column .custom-checkbox {
      display: block;
      margin: 8px 0;
      padding: 5px 10px;
      border-radius: 4px;
      transition: all 0.3s;


    }

    .dialog-content .checkbox-columns .checkbox-column .custom-checkbox:hover {
      background-color: #f5f5f5;
    }

    .custom-dialog .dialog-footer {
      text-align: center;
      padding: 15px 0;


    }

    .custom-dialog .dialog-footer .cancel-btn {
      width: 100px;
      background: #f5f5f5;
      color: #666;
      border: none;


    }

    .custom-dialog .dialog-footer .cancel-btn:hover {
      background: #e6e6e6;
    }

    .custom-dialog .dialog-footer .confirm-btn {
      width: 100px;
      background: #d31805;
      border: none;


    }

    .custom-dialog .dialog-footer .confirm-btn:hover {
      background: #b31505;
    }

    .zz {
      transition: all 0.3s ease;
      font-size: 36px;
    }

    .layui-card:hover .zz {
      transform: scale(1.05);
      color: #fff;
    }

    .top {
      height: 140px;
      padding: 15px;

    }

    .layui-card-body {
      /* border: 1px solid red; */
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100% - 42px);
      /* 减去标题高度 */
      /* text-align: center; */

    }

    .sz {

      /* border: 1px solid black; */
      position: relative;
      height: 42px;
      line-height: 42px;
      color: rgba(255, 255, 255, 1);
      font-size: 20px;
      padding: 0 15px;
      border-radius: 2px 2px 0 0;
      text-align: center;
    }

    .zz {
      color: rgba(255, 255, 255, 1);
      font-size: 36px;
      text-align: center;
      /* display: flex; */
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .layui-card {
      /* border: 1px solid red; */
      /* 添加一个小手 */
      cursor: pointer
        /* 点击那个怎么一个阴影方便我知道我选中那个 */
    }

    .layui-card.selected {
      /* border: 2px solid #d31805; */
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    }

    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }

    .layui-col-md3 {
      width: 25%;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <!-- 顶部 -->
    <div class="top">
      <div class="layui-row layui-col-space10">
        <!-- A类 -->
        <div class="layui-col-xs6 layui-col-md3" @click="handleCardClick($event)">
          <div class="layui-card top-panel bg" style="background-color: #B71C1C;" style="width: 100%">
            <div class="sz">A类人员</div>
            <div class="layui-card-body">
              <div class="layui-row layui-col-space5">
                <div class="layui-col-xs8 layui-col-md8 zz" id="value1">
                  {{ statistics.A类人员.total }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- B类 -->
        <div class="layui-col-xs6 layui-col-md3" @click="handleCardClick($event)">
          <div class="layui-card top-panel bg" style="background-color: #F57F17;" style="width: 100%">
            <div class="sz">B类人员
            </div>
            <div class="layui-card-body">
              <div class="layui-row layui-col-space5">
                <div class="layui-col-xs8 layui-col-md8 zz" id="value1">
                  {{ statistics.B类人员.total }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- C类 -->
        <div class="layui-col-xs6 layui-col-md3" @click="handleCardClick($event)">
          <div class="layui-card top-panel bg" style="background-color: #309bff ;" style="width: 100%">
            <div class="sz">C类人员
            </div>
            <div class="layui-card-body">
              <div class="layui-row layui-col-space5">
                <div class="layui-col-xs8 layui-col-md8 zz" id="value2">
                  {{ statistics.C类人员.total }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- D类 -->
        <div class="layui-col-xs6 layui-col-md3" @click="handleCardClick($event)">
          <div class="layui-card top-panel bg" style="background-color: rgb(43, 221, 7);" style="width: 100%">
            <div class="sz">D类人员
            </div>
            <div class="layui-card-body">
              <div class="layui-row layui-col-space5">
                <div class="layui-col-xs8 layui-col-md8 zz" id="value1">
                  {{ statistics.D类人员.total }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title" style="margin:0 10px;">
      <div style="padding: 5px;">
        名称&nbsp;&nbsp;<el-input clearable v-model="page.value1" style="width: 200px;margin-right: 10px;"
          placeholder="请输入内容"></el-input>
        身份证编号&nbsp;&nbsp;
        <el-input clearable v-model="page.value2" style="width: 200px;margin-right: 10px;"
          placeholder="请输入内容"></el-input>
        类别人员&nbsp;&nbsp; <el-select clearable v-model="page.value3" style="width: 200px;margin-right: 10px;"
          placeholder="请选择">
          <el-option v-for="item in options" :key="item.Personal_Tag_SerialNumber" :label="item.Personal_Tag" :value="item.Personal_Tag_SerialNumber">
          </el-option>
        </el-select>
        <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
        <!-- <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="reset">重置</el-button> -->
        <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" plain round
          @click="personalAdd">添加</el-button>
        <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>批量导入</el-button>
        <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>批量导出</el-button>
        <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>批量删除</el-button> -->
      </div>
    </div>
    <div class="body">
      <!-- 左边 -->
      <div class="left">
        <el-tree ref="tree" default-expand-all :expand-on-click-node="false" id="tree" style="max-width: 600px"
          :data="treeData" @node-click="handleNodeClick" :props="{ label: 'Province' }">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <span>{{ node.label }}</span>
            </div>
          </template>
        </el-tree>
      </div>
      <!-- 右边 -->
      <div class="right">
        <el-table id="table" border
          :data-options="JSON.stringify({ 'TableName': 'personal_information','primary_key':'ID_Card_Number'})"
          height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
          @selection-change="handleSelectionChange">
          <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
            :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
            <template v-slot="{row}">
              <div v-if="isValueType(row[column.COLUMN_NAME])=='image'">
                <el-image style="width: 100px; height: 100px" :src="photo + row[column.COLUMN_NAME]"
                  fit="contain"></el-image>
              </div>
              <template v-else>
                {{row[column.COLUMN_NAME]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="100" fixed="right" align="center" label="状态">
            <template v-slot="{row}">
                <el-tag v-if="row.Focus=='1'" type="danger">重点关注</el-tag>
            </template>
        </el-table-column>
          <el-table-column label="操作" fixed="right" width="160">
            <template #default="{row}">
              <div style="display: flex; align-items: center;">
                <el-button style="margin-right: 10px;" size="small" @click="handleEdit(row)">
                  编辑
                </el-button>
                <el-dropdown trigger="click">
                  <el-button size="small">
                    更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handlebj(row)">
                        重点关注
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>

            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 1%;" :current-page="page.Pag0eNumber" :page-size="page.RowAmount"
          :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="Total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog v-model="showDialog" width="550" class="custom-dialog">
      <template #header>
        <div class="dialog-header">
          <span>设置显示字段</span>
        </div>
      </template>
      <div class="dialog-content">
        <el-checkbox v-model="isAllChecked" @change="handleAllChecked" class="full-width-checkbox">全选</el-checkbox>
        <div class="checkbox-columns">
          <el-checkbox-group v-model="checkedFields" style="width: 100%; display: flex; flex-wrap: wrap">
            <el-checkbox :disabled="field.COLUMN_KEY === 'PRI'" v-for="field in fields" :key="field" :value="field"
              style="width: 50%; height: 30px; margin-right: 0px">
              {{ field.COLUMN_COMMENT }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="calendar" width="900" class="custom-dialog">

      <div class="dialog-content">
        <el-select clearable v-model.trim="Party_Organization_SerialNumber" placeholder="请选择责任单位" filterable
          style="width: 100%">
          <el-option v-for="(item,index) in organization" :key="index" :label="item.Party_Organization_Name"
            :value="item.Party_Organization_SerialNumber"></el-option>
        </el-select>
        <yl-monthly-calendar :value="Party_Organization_SerialNumber"></yl-monthly-calendar>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="calendar = false" class="cancel-btn">取消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
  </div>
  <script src="../../utils/utils.js"></script>
  <script src="../../utils/mixins.js"></script>
  <script src="../../config/config.js"></script>
  <script src="../../yl/vue.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="../../yl/zh-cn.mjs"></script>
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/jquery.min.js"></script>
  <script src="../../utils/jquery.cookie.js"></script>
  <script src="../../api/request.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>